@BG: rgba(136, 136, 136, 0.5);
@HOVER: #ef8c81;
@COLOR: #fcbbb1;
@BORDER: #40c2f8;
.list {
  display: flex;
  flex-wrap: wrap;
  margin: 0px auto;
  justify-content: flex-start;
  .item {
    position: relative;
    width: 300px;
    padding: 10px;
    min-height: 130px;
    cursor: pointer;
    border-top: 1px solid @BORDER;
    margin-right: 10px;
    overflow: hidden;
    animation: siteItem 0.3s;
    .top {
      display: flex;
      .imgBox {
        width: 85px;
        height: 85px;
        border-radius: 50%;
        overflow: hidden;
        position: relative;
        border: 1px dashed @BORDER;
      }
      .img {
        margin-top: 1px;
        margin-left: 1px;
        width: 80px;
        height: 80px;
        border-radius: 40px;
        overflow: hidden;
        background-size: cover !important;
        // opacity: 0.3;
        transition: all 0.3s;
      }
      .siteName {
        width: 200px;
        margin-left: 10px;
        font-size: 18px;
        display: flex;
        justify-content: center;
        flex-direction: column;
        .mainName {
          color: @BORDER;
        }
        a {
          color: @COLOR;
        }
        .siteOpe {
          display: flex;
          align-items: center;
          .hot {
            display: flex;
            justify-content: center;
            align-items: center;
            color: @BORDER;
            font-size: 15px;
          }
          a {
            font-size: 13px;
            margin-right: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          a:hover {
            color: @HOVER;
          }
        }
      }
    }
    .siteDesc,
    .date {
      font-size: 13px;
      line-height: 20px;
      padding-left: 89px;
      color: @COLOR;
    }
  }
}

.info {
  margin-top: 20px;
  font-size: 15px;
  color: @BORDER;
}
@keyframes siteItem {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.con {
  display: flex;
  width: 300px;
  // background: white;
  padding: 5px 0;
  color: @BORDER;
  .filter::before {
    content: '';
    width: 1px;
    height: 9px;
    background: #40c2f8;
    position: absolute;
    top: 8px;
    left: 68px;
  }
  .filter {
    display: flex;
    margin-left: 50px;
    position: relative;
    .filterItem {
      cursor: pointer;
      // border-right: 1px solid @BORDER;
      position: relative;
      transition: all 0.3s;
      opacity: 0.4;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .filterItem[data-current='true'] {
      opacity: 1;
    }
    .filterItem:last-of-type {
      margin-left: 20px;
    }
    .filterItem:last-of-type::before {
      // border: none;
      display: none;
    }
    .sort {
      transition: all 0.3s;
      transform-origin: center;
      cursor: pointer;
      position: relative;
      margin-left: 50px;
    }
    .downSort {
      transform: rotate(180deg);
      top: 1px;
    }
  }
  margin-bottom: 30px;
}
